<template>
    <div class="header">
        <div class="headerLayout w1200">
            <div class="headerCon">
                <h1 class="mallLogo">
                    <a href="/" title="首页">
                        <img src="img/logo.png">
                    </a>
                </h1>
                <div class="mallSearch">
                    <div class="layui-form">
                        <input type="text" v-model="search" required lay-verify="required" autocomplete="off"
                               class="layui-input"
                               placeholder="请输入需要的商品">
                        <button class="layui-btn" lay-submit lay-filter="formDemo" @click="mySearch">
                            <i class="layui-icon layui-icon-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content content-nav-base" :class="activation">
        <div class="main-nav">
            <div class="inner-cont0">
                <div class="inner-cont1 w1200">
                    <div class="inner-cont2">
                        <router-link :to="`/`" :class="activation == '' ?'active':''">首页</router-link>
                        <router-link :to="`/commodity`" :class="activation == 'commodity' ?'active':''">所有商品
                        </router-link>
                        <router-link :to="`/shopper/shopcart`" :class="activation == 'shopcart' ?'active':''">购物车
                        </router-link>
                        <router-link :to="`/shopper`" :class="activation == 'shopper' ?'active':''">个人中心</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: ''
            }
        },
        props: {
            activation: {
                type: String,
                default: ''
            },
        },
        methods: {
            // 搜索商品
            mySearch: function () {
                this.$router.push({path: '/commodity', query: {search: this.search, page: 1}})
            },
        }
    }
</script>

<style scoped>

</style>
